<template>
	<view class="">
		<view class="exitBox">
			<view class="btn" @click="handleExit">退出登录</view>
		</view>

		<view class="table-box">
			<uni-table border stripe emptyText="暂无更多数据" ref="tableRefNumber" style="">
				<!-- 表头行用于固定 -->
				<uni-tr class="uni-table-header">
					<uni-th align="center" width="30px">工单单别</uni-th>
					<uni-th align="center" width="50px">工单单号</uni-th>
					<uni-th align="center" width="50px">产品品号</uni-th>
					<uni-th align="center" width="50px">产品品名</uni-th>
					<uni-th align="center" width="50px">产品规格</uni-th>
					<uni-th align="center" width="50px">工作中心</uni-th>
					<uni-th align="center" width="50px">工艺</uni-th>
					<uni-th align="center" width="50px">工单数量</uni-th>
					<uni-th align="center" width="50px">开工状态</uni-th>
					<uni-th align="center" width="80px">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in listDate" :key="index">
					<uni-td align="center">{{item.TA001}}</uni-td>
					<uni-td align="center">{{item.TA002}}</uni-td>
					<uni-td align="center">{{item.TA006}}</uni-td>
					<uni-td align="center">{{item.TA034}}</uni-td>
					<uni-td align="center">{{item.TA035}}</uni-td>
					<uni-td align="center">{{item.TA006C}}</uni-td>
					<uni-td align="center">{{item.TA004}}</uni-td>
					<uni-td align="center">{{item.TA015}}</uni-td>
					<uni-td align="center">
						<view class="" :style="{
					    color: item.deviceStatus === '1' ? '#999' : 
					           item.deviceStatus === '2' ? '#4CAF50' : 
					           item.deviceStatus === '3' ? '#FF9800' : 
					           item.deviceStatus === '4' ? '#F44336' : '#999'
					  }">
							{{
					    item.deviceStatus === '1' ? "未开工" :
					    item.deviceStatus === '2' ? "开始" : 
					    item.deviceStatus === '3' ? "暂停" : 
					    item.deviceStatus === '4' ? "结束" : "未开工"
					  }}
						</view>
					</uni-td>
					<uni-td align="center">
						<view class="btnBox">
							<view class="edit-btn btn-bg" @click="handleToWork(item)">机器开工</view>
							<view class="edit-btn" @click="handldereport(item)">报工</view>
						</view>
					</uni-td>
				</uni-tr>

			</uni-table>
		</view>


	</view>
</template>

<script>
	import {
		$get,
	} from '@/utils/request';
	export default {
		data() {
			return {
				listDate: []
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() { //查询数据列表
				console.log( uni.getStorageSync('machineCode'));
				console.log( uni.getStorageSync('companyCode'));
				$get('quality/bigScreenApp/list', {
					machineCode: uni.getStorageSync('machineCode'),
					companyCode: uni.getStorageSync('companyCode')
				}).then(res => {
					if (res.code == 200) {
						console.log(res)
						this.listDate = res.rows
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						});
					}
				})
			},
			handleToWork(item) { //机器开工
				uni.navigateTo({
					url: `/pages/startwork/startwork?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			handldereport(item) { //报工
				uni.navigateTo({
					url: `/pages/report/report?item=${encodeURIComponent(JSON.stringify(item))}`
				})

			},
			handleExit() {
				uni.removeStorageSync('companyCode');
				uni.removeStorageSync('machineName');
				uni.removeStorageSync('machineCode');

				uni.navigateTo({
					url: '/pages/login/login'
				});


			}

		}
	}
</script>


<style lang="less" scoped>
	.exitBox {
		padding: 30rpx;
		display: flex;
		justify-content: flex-end;

		.btn {
			padding: 10rpx 26rpx;
			color: white;
			border-radius: 10rpx;
			background-color: #005aca;
		}
	}

	.table-box {
		margin-top: 50rpx;
		padding: 40rpx;


		.btnBox {
			width: 100%;
			display: flex;
			justify-content: space-around;

			.edit-btn {
				width: 40%;
				padding: 10rpx;
				color: white;
				border-radius: 10rpx;
				background-color: #005aca;
			}

			.btn-bg {
				background-color: orangered;
			}
		}

	}
</style>